<template>
  <div class="to-do-list">
    <p class="title">
      <img src="/static/images/icon/icon_todolist.png"/>
      <span>{{$t("workbench.toDoList")}}</span>
      <!-- 增加字段是否为从首页跳转 -->
      <router-link v-if="isToDoList"
      :to="{ path: '/TeacherRollCheckUnapproved' }"
      class="more-link secondary-text">
        <span>{{$t('message.more')}}</span><img src="/static/images/icon/icon_more.png" />
      </router-link>
    </p>
    <div class="to-do-content">
      <!-- <p class="date-title">{{toDoItem.date}}</p> -->
      <ul class="content-list">
        <li :class="{'li-height': isAdaptive}" v-for="(item, index) in toDoList" :key="index" @click="msgDetails(item.linkId)">
          <span class="content-left">
            <img v-if="item.result === '2'" src="/static/images/icon_thingsok.png" />
            <img v-else-if="item.result === '1'" src="/static/images/icon_thingstodo.png" />
            <span>{{item.msgTitle}}</span>
          </span>
          <span class="content-right">
            <span v-if="item.createUser">{{item.createUser}}</span>
            <span v-if="item.createId">{{` ( ${item.createId} ) `}}</span>
            <span>{{ item.createTime | formatDate }}</span>
          </span>
          <div class="clear-both"></div>
        </li>
      </ul>
    </div>
    <div class="clear-both"></div>
  </div>
</template>
<script>

import { selectTaskList } from "common/src/api/approval";
import filters from "common/src/filters"
import Bus from "common/src/utils/bus";

export default {
  name: "ToDOList",
  filters: {
    formatDate(date) {
      return filters.formatDate(date, "yyyy/MM/dd hh:mm:ss");
    }
  },
  props: ['loginUserType', 'isAdaptive'],
  data() {
    return {
      query: {
        isHome:true,
        pageNum: 1,
        pageSize: 20
      }, // 查询代办列表条件
      isToDoList: true, // 是否有系统公告菜单
      toDoListPath: '/messages', // 系统公告path
      toDoList: [] // 待办事件列表
    };
  },
  created() {
    // 处理判断系统公告菜单是否配置
    Bus.$on('getMenusList', list => {
      this.isToDoList = list.some((item, index) => {
        return item.urlPath === this.toDoListPath;
      })
      if (this.isToDoList) {
        // 查询待办事项列表
        this.searchToDoList();
      }
    });
  },
  beforeDestroy() {
    Bus.$off('getMenusList');
  },
  methods: {
    // 获取待办事项列表
    searchToDoList() {
      selectTaskList(this.query).then(res => {
        if (res.code == 200) {
          this.toDoList = res.data.list;
        }
      });
      // 判断是否是管理员  1：调取selectTaskListPage，2或者""：调取selectTaskList
      // if (this.loginUserType === "1") {
      //   selectTaskListPage(this.query).then(res => {
      //     if (res.code == 200) {
      //       this.toDoList = res.data.list;
      //     }
      //   });
      // } else {
      //   selectTaskList(this.query).then(res => {
      //     if (res.code == 200) {
      //       this.toDoList = res.data.list;
      //     }
      //   });
      // }
    },
    // 待办事项详情
    msgDetails(message) {
        let path = `/TeacherRollDetail?id=${message.no}`
        if (!message.no) {
          this.$message({
              type: 'warning',
              message: '未找到对应的待办数据'
          })
          path = '';
        }
        if (path) {
            this.$router.push({
                path: path
            });
        }
    }
  }
};
</script>
<style lang="scss" scoped>
  .to-do-list {
    height: 100%;
    overflow: hidden;
    .title {
      font-size: 18px;
      color: #2B3B4E;
      letter-spacing: 0;
      line-height: 24px;
      margin-bottom: 4px;
      font-weight: bolder;
      img {
        width: 24px;
        height: 24px;
        vertical-align: middle;
        margin-right: 8px;
      }
      span {
        vertical-align: middle;
      }
      .more-link {
        float: right;
        font-size: 14px;
        color: #3A7FE8;
        span {
          vertical-align: middle;
        }
        img {
          width: 12px;
          height: 12px;
          vertical-align: middle;
        }
      }
    }
    .to-do-content {
      height: calc(100% - 28px);
      .content-list {
        height: 100%;
        list-style: none;
        padding: 0 8px 0 0;
        margin: 0;
        border-radius: 2px;
        overflow: hidden;
        li {
          height: 36px;
          line-height: 36px;
          font-size: 14px;
          display: flex;
          flex-wrap: nowrap;
          cursor: pointer;
          align-items: center;
          &.li-height {
            height: calc(100% / 7);
          }
          &:hover {
            color: #3A7FE8;
            .content-right {
              color: #3A7FE8;
            }
          }
          &:last-child {
            margin-bottom: 0;
          }
          .content-left {
            vertical-align: middle;
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-right: 20px;
            img {
              vertical-align: middle;
              margin-right: 8px;
            }
            span {
              vertical-align: middle;
            }
          }
          .content-right {
            color: #8896A7;
            text-align: right;
          }
        }
      }
      &::-webkit-scrollbar {/*滚动条整体样式*/
        width: 6px;
        height: 1px;
      }
      &::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 3px;
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: #D4D8DC;
      }
      &::-webkit-scrollbar-track {/*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        border-radius: 10px;
        background: #fff;
      }
    }
  }
</style>
